@themeColor:#20bf6b;
@width: 100px;
@height:0.4*@width;
@bodybgColor:#d1d8e0;

// 定位+margin:auto方式来居中
.center_margin {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}


//*************************************//



body{
  margin: 0;
  padding: 0;
  background-color: @bodybgColor;
}


.switch_on{
  background-color: @themeColor!important;
  filter: drop-shadow(0.01*@width -0.01*@width 0.02*@width #59627599)!important;
  transition: all 300ms linear;
}
.switch{
  width: @width;
  height: @height;
  background-color: @bodybgColor;
  border: 0.02*@width solid #fff;
  border-radius: @width;
  box-shadow: inset 0 0 5px #59627599;
  cursor: pointer;
  transition: all 300ms linear;
  .center_margin;
  filter: drop-shadow(-0.01*@width 0.01*@width 0.02*@width #59627599);



  .knob_on {
    transform:translateX(150%) rotate(360deg) !important;
    border: 0.01*@width solid #fff!important;
    background-color: #a55eea!important;
    transition: transform 300ms linear;
  }
  .knob{
    width: @height;
    height: @height;
    border: 0.01*@width solid #808e9b99;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    transform: rotate(180deg);
    transition: transform 300ms linear;

    img{
      width: 90%;
      height: 90%;
      .center_margin;
      // display: none;
    }

  }
}